<template>
  <div id="main">
      <!-- 推广 -->
      <div class="mainCont clearfix" id="promote">
        <div class="pic-list fl">
          <div class="pic-list__title">
            <i class="icon icon-promote"></i>
            <h2>推广</h2>
            <a href="#" class="promote-link">来感受创作的力量吧！</a>
          </div>
          <ul class="pic-list__wrapper clearfix">
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【欧美男模】 禁欲系 （西装控）</a>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">煮泡面好吃还是泡泡面好吃？藤椒双辣挑战！~</a>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【DEC】S5E8 化学方法的划手特效~</a>
              </div>
            </li>
          </ul>
        </div>
        <div class="main-side fl">
          <div class="promote-side__title">
            <a href="#">在线人数：715509</a>
            <span>|</span>
            <a href="#">最新投稿：5806</a>
          </div>
          <a href="#" class="promote-side__img"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
        </div>
      </div>

      <!-- 直播 -->
      <div class="mainCont clearfix" id="live" >
        <div class="pic-list fl">
          <div class="pic-list__title">
            <i class="icon icon-live"></i>
            <h2>正在直播</h2>
            <p class="live-online">当前共有<em>2232</em>个在线直播</p>
            <div class="more-wrap">
              <a href="#" class="dynamic"><i></i>392条新动态</a>
              <a href="#" class="more">更多<i></i></a>
            </div>
          </div>
          <ul class="pic-list__wrapper clearfix">
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="category">单级联机</span>
                <img class="headImg" src="../../assets/image/cont/live_headImg1.jpg" alt="#">
                <i class="icon-live">Live</i>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="category">单级联机</span>
                <img class="headImg" src="../../assets/image/cont/live_headImg1.jpg" alt="#">
                <i class="icon-live">Live</i>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="category">单级联机</span>
                <img class="headImg" src="../../assets/image/cont/live_headImg1.jpg" alt="#">
                <i class="icon-live">Live</i>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="category">单级联机</span>
                <img class="headImg" src="../../assets/image/cont/live_headImg1.jpg" alt="#">
                <i class="icon-live">Live</i>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="category">单级联机</span>
                <img class="headImg" src="../../assets/image/cont/live_headImg1.jpg" alt="#">
                <i class="icon-live">Live</i>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="category">单级联机</span>
                <img class="headImg" src="../../assets/image/cont/live_headImg1.jpg" alt="#">
                <i class="icon-live">Live</i>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="category">单级联机</span>
                <img class="headImg" src="../../assets/image/cont/live_headImg1.jpg" alt="#">
                <i class="icon-live">Live</i>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="category">单级联机</span>
                <img class="headImg" src="../../assets/image/cont/live_headImg1.jpg" alt="#">
                <i class="icon-live">Live</i>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="main-side fl">
          <div class="main-side__title">
            <a href="#" class="live-rank">直播排行</a>
            <div class="tab-title">
              <a href="#" class="cur">为你推荐</a>
              <a href="#">关注的主播</a>
            </div>
          </div>
          <div class="main-side__cont">
            <div class="tab-cont">
              <div class="slider-ov tab-cont__item">
                <div class="slider">
                  <div class="slider-img">
                    <a href="#" slider-title="pic1"><img src="../../assets/image/cont/slider_img1.png" alt="#"></a>
                    <a href="#" slider-title="pic2"><img src="../../assets/image/cont/slider_img2.png" alt="#"></a>
                    <a href="#" slider-title="pic3"><img src="../../assets/image/cont/slider_img3.png" alt="#"></a>
                  </div>
                  <div class="slider-title"><p>pic1</p></div>
                  <div class="slider-btn">
                    <span class="cur"></span>
                    <span></span>
                    <span></span>
                  </div>
                </div>
                <div class="slider-user">
                  <a href="#">
                    <img src="../../assets/image/cont/slider-user1.jpg" alt="#">
                    <p>哔哩老攻</p>
                  </a><a href="#">
                    <img src="../../assets/image/cont/slider-user2.jpg" alt="#">
                    <p>红发杰克丶</p>
                  </a><a href="#">
                    <img src="../../assets/image/cont/slider-user3.jpg" alt="#">
                    <p>麻辣图图</p>
                  </a><a href="#">
                    <img src="../../assets/image/cont/slider-user4.jpg" alt="#">
                    <p>猴叔w</p>
                  </a>
                </div>
              </div>
              <div class="live-focus tab-cont__item">
                <span>没有数据</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 动画 -->
      <div class="mainCont clearfix" id="animation" js-move="true">
        <div class="pic-list fl" js-tab="true">
          <div class="pic-list__title">
            <i class="icon icon-animation"></i>
            <h2>动画</h2>
            <div class="tab-title">
              <a href="#" class="cur">有新动态</a>
              <a href="#">最新投稿</a>
            </div>
            <a href="#" class="main-link"><i></i>我的十月新番打开方式一定有问题</a>
            <div class="more-wrap">
              <a href="#" class="dynamic"><i></i>392条新动态</a>
              <a href="#" class="more">更多<i></i></a>
            </div>
          </div>
          <ul class="pic-list__wrapper clearfix tab-cont__item tab-cont__cur">
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
          </ul>
          <ul class="pic-list__wrapper clearfix tab-cont__item">
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="main-side fr" js-tab="true">
          <div class="main-side__title">
            <div class="rank-t">
              <h3>排行</h3>
            </div>
            <div class="tab-title">
              <a href="#" class="cur">全部</a>
              <a href="#">原创</a>
            </div>
            <div class="side-select">
              <span>三日</span>
              <i></i>
            </div>
          </div>
          <div class="main-side__cont">
            <div class="tab-cont">
              <ul class="tab-cont__item main-rank">
                <li class="item item-one">
                  <a href="#">
                    <i class="n1">1</i>
                    <img src="../../assets/image/cont/main-rank__img1.jpg" alt="#">
                    <div>
                      <p class="title">【1月】小林家的龙女仆 10【独家正版】</p>
                      <p class="mark">综合评分: 109.3万</p>
                    </div>
                  </a>
                </li>
                <li class="item">
                  <a href="#"><i class="n2">2</i>                  【1月】火影忍者 疾风传 719</a>
                </li>
                <li class="item">
                  <a href="#"><i class="n3">3</i>                    【4月】双星之阴阳师 48</a>
                </li>
                <li class="item">
                  <a href="#"><i>4</i>狐妖小红娘 52 狗血大戏正上演 OP特效又更换</a>
                </li>
                <li class="item">
                  <a href="#"><i>5</i>少年锦衣卫 第一季 06 怪谈</a>
                </li>
                <li class="item">
                  <a href="#"><i>6</i>画江湖之不良人Ⅱ 35 阋墙之祸</a>
                </li>
                <li class="item">
                  <a href="#"><i>7</i>【1月】黑白来看守所 24【独家正版】</a>
                </li>
              </ul>
              <ul class="tab-cont__item main-rank">
                <li class="item item-one">
                  <a href="#">
                    <i class="n1">1</i>
                    <img src="../../assets/image/cont/main-rank__img2.jpg" alt="#">
                    <div>
                      <p class="title">【1月】小林家的龙女仆 10【独家正版】</p>
                      <p class="mark">综合评分: 109.3万</p>
                    </div>
                  </a>
                </li>
                <li class="item">
                  <a href="#"><i class="n2">2</i>                  【1月】火影忍者 疾风传 719</a>
                </li>
                <li class="item">
                  <a href="#"><i class="n3">3</i>                    【4月】双星之阴阳师 48</a>
                </li>
                <li class="item">
                  <a href="#"><i>4</i>狐妖小红娘 52 狗血大戏正上演 OP特效又更换</a>
                </li>
                <li class="item">
                  <a href="#"><i>5</i>少年锦衣卫 第一季 06 怪谈</a>
                </li>
                <li class="item">
                  <a href="#"><i>6</i>画江湖之不良人Ⅱ 35 阋墙之祸</a>
                </li>
                <li class="item">
                  <a href="#"><i>7</i>【1月】黑白来看守所 24【独家正版】</a>
                </li>
              </ul>
            </div>
            <a href="#" class="more">查看更多<i></i></a>
          </div>
        </div>
      </div>

      <!-- 番剧 -->
      <div class="weekCont clearfix" id="bangumi" js-move="true">
        <div class="pic-list fl" js-tab="true">
          <div class="pic-list__title">
            <i class="icon icon-bangumi"></i>
            <h2>番剧</h2>
            <div class="tab-title week-tab">
              <a href="#" class="cur">最新</a>
              <a href="#">一</a>
              <a href="#">二</a>
              <a href="#">三</a>
              <a href="#">四</a>
              <a href="#">五</a>
              <a href="#">六</a>
              <a href="#">日</a>
            </div>
            <a href="#" class="week-schedule">新番时间表<i></i></a>
          </div>
          <div class="weekCont-list">
            <ul class="tab-cont__item tab-cont__cur">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="main-side fr">
          <div class="main-side__title">
            <div class="rank-t">
              <h3>番剧排行</h3>
            </div>
            <div class="side-select">
              <span>三日</span>
              <i></i>
            </div>
          </div>
          <div class="main-side__cont">
            <ul class="main-rank">
              <li class="item">
                <a href="#"><i class="n1">1</i>人渣的本愿<span>全12话</span></a>
              </li>
              <li class="item">
                <a href="#"><i class="n2">2</i>小林家的龙女仆<span>更新至第12话</span></a>
              </li>
              <li class="item">
                <a href="#"><i class="n3">3</i>双星之阴阳师<span>全12话</span></a>
              </li>
              <li class="item">
                <a href="#"><i>4</i>珈百璃的堕落<span>更新至第12话</span></a>
              </li>
              <li class="item">
                <a href="#"><i>5</i>怪怪守护神<span>全12话</span></a>
              </li>
              <li class="item">
                <a href="#"><i>6</i>火影忍者 疾风传<span>全12话</span></a>
              </li>
              <li class="item">
                <a href="#"><i>7</i>Hand Shakers<span>更新至第1话</span></a>
              </li>
              <li class="item">
                <a href="#"><i>8</i>爱丽丝与藏六<span>全12话</span></a>
              </li>
            </ul>
            <a href="#" class="more">查看更多<i></i></a>
          </div>
        </div>
      </div>

      <!-- 番剧动态 -->
      <div class="mainCont clearfix" id="bangumi_dynamic">
        <div class="pic-list fl" js-tab="true">
          <div class="pic-list__title">
            <h2>番剧动态</h2>
            <div class="tab-title">
              <a href="#" class="cur">有新动态</a>
              <a href="#">最新投稿</a>
            </div>
            <a href="#" class="main-link"><i></i>这里的龙不得了</a>
            <div class="more-wrap">
              <a href="#" class="dynamic"><i></i>392条新动态</a>
              <a href="#" class="more">更多<i></i></a>
            </div>
          </div>
          <ul class="pic-list__wrapper clearfix tab-cont__item tab-cont__cur">
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
          </ul>
          <ul class="pic-list__wrapper clearfix tab-cont__item">
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
            <li class="item">
              <a href="#" class="img-link">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <span class="mask"></span>
                <span class="time">3:39</span>
              </a>
              <div class="img-info">
                <a href="#">【FGO】轮到两仪式来给你洗脑了~</a>
                <div class="btm">
                  <div class="user"><i></i>铃椛</div>
                  <div class="online"><i></i>6732</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="main-side fr">
          <div class="main-side__title">
            <div class="rank-t">
              <h3>特别推荐</h3>
            </div>
          </div>
          <div class="main-side__cont">
            <div class="bangumi-pic">
              <a href="#">
                <img src="../../assets/image/cont/main_pic.jpg" alt="#">
                <div class="info">
                  <p>遵奉天命 迎接主上</p>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- 国创 -->
      <div class="weekCont clearfix" id="china" js-move="true">
        <div class="pic-list fl" js-tab="true">
          <div class="pic-list__title">
            <i class="icon icon-china"></i>
            <h2>国创</h2>
            <div class="tab-title week-tab">
              <a href="#" class="cur">最新</a>
              <a href="#">一</a>
              <a href="#">二</a>
              <a href="#">三</a>
              <a href="#">四</a>
              <a href="#">五</a>
              <a href="#">六</a>
              <a href="#">日</a>
            </div>
            <a href="#" class="week-schedule">新番时间表<i></i></a>
          </div>
          <div class="weekCont-list">
            <ul class="tab-cont__item tab-cont__cur">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
            <ul class="tab-cont__item">
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
              <li>
                <a href="#" class="pic"><img src="../../assets/image/cont/main_pic.jpg" alt="#"></a>
                <div class="info">
                  <a href="#">珈百璃的堕落</a>
                  <p>更新至<span>12话</span></p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="main-side fr">
          <div class="main-side__title">
            <div class="rank-t">
              <h3>国产动画排行</h3>
            </div>
            <div class="side-select">
              <span>三日</span>
              <i></i>
            </div>
          </div>
          <div class="main-side__cont">
            <ul class="main-rank">
              <li class="item">
                <a href="#"><i class="n1">1</i>狐妖小红娘<span>更新至第54话</span></a>
              </li>
              <li class="item">
                <a href="#"><i class="n2">2</i>银之守墓人<span>更新至第1话</span></a>
              </li>
              <li class="item">
                <a href="#"><i class="n3">3</i>斗破苍穹<span>全12话</span></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name:'mainTop'
}
</script>

<style>
#main{
  width: 1000px;
  margin: 0 auto;
  overflow:-Scroll;
  overflow-y:hidden
}
.mainCont,
.weekCont {
  margin-top: 10px;
}
.pic-list {
  width: 700px;
}
.main-side {
  width: 260px;
  margin-left: 20px;
}
.pic-list__title {
  position: relative;
  width: 100%;
  height: 64px;
}
.pic-list__title .icon {
  display: inline-block;
  width: 46px;
  height: 64px;
  background: url(../../assets/image/page_icons.png) no-repeat;
}
.pic-list__title h2 {
  display: inline-block;
  line-height: 64px;
  font-size: 24px;
  vertical-align: top;
}
.pic-list__wrapper {
  margin-right: -20px;
}
.pic-list__wrapper .item {
  float: left;
  width: 160px;
  margin: 0 20px 20px 0;
}
.pic-list__wrapper .img-link {
  overflow: hidden;
  position: relative;
  width: 160px;
  height: 100px;
  border-radius: 4px;
}
.pic-list__wrapper .img-link img {
  width: 100%;
}
.pic-list__wrapper .img-link .mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
}
.pic-list__wrapper .img-link .time {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 20px;
  margin: 0 5px;
  color: #fff;
}
.pic-list__wrapper .img-link .mask,
.pic-list__wrapper .img-link .time {
  display: none;
}
.pic-list__wrapper .item:hover .img-link .mask,
.pic-list__wrapper .item:hover .img-link .time {
  display: block;
}
.pic-list__wrapper .item:hover .img-info a {
  color: #00a1d6;
}
.pic-list__wrapper .img-info {
  overflow: hidden;
  height: 48px;
}
.pic-list__wrapper .img-info a {
  overflow: hidden;
  height: 20px;
  margin-top: 6px;
  line-height: 20px;

  transition: height .3s;
}
.pic-list__wrapper .item:hover .img-info a {
  height: 38px;
}
.pic-list__wrapper .img-info .btm {
  margin-top: 7px;
  color: #99a2aa;
}
.pic-list__wrapper .img-info .user {
  float: left;
  width: 85px;
}
.pic-list__wrapper .img-info .user i,
.pic-list__wrapper .img-info .online i {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: top;
}
.pic-list__wrapper .img-info .user i {
  background-image: url(../../assets/image/page_icons.png);
  background-repeat: no-repeat;
  background-position: -282px -154px;
}
.pic-list__wrapper .img-info .online {
  float: left;
}
.pic-list__wrapper .img-info .online i {
  background: url(../../assets/image/live_online.png) no-repeat;
}
.tab-title {
  float: left;
  padding-top: 18px;
  font-size: 0;
}
.tab-title a {
  position: relative;
  display: inline-block;
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  margin-left: 14px;
}
.tab-title a.cur {
  color: #00a1d6;
  border-bottom: 1px solid #00a1d6;
}
.tab-title a.cur:after {
  position: absolute;
  left: 45%;
  bottom: 0;
  content: "";
  width: 0;
  height: 0;
  border-width: 3px;
  border-style: solid;
  border-color: transparent transparent #00a1d6 transparent;
}
.main-gg {
  display: block;
  width: 100%;
  height: 80px;
  margin-top: 20px;
}
.main-gg img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.more-wrap {
  float: right;
  padding-top: 20px;
}
.more-wrap .dynamic,
.more-wrap .more {
  float: left;
  height: 22px;
  line-height: 22px;
  border: 1px solid #ccd0d7;
  border-radius: 4px;
}
.more-wrap .dynamic:hover,
.more-wrap .more:hover {
  color: #333;
  background-color: #ccd0d7;
}
.more-wrap .dynamic {
  width: 106px;
  margin-right: 10px;
}
.more-wrap .more {
  width: 52px;
  text-align: right;
}
.more-wrap .dynamic i,
.more-wrap .more i {
  display: inline-block;
  height: 22px;
  background: url(../../assets/image/page_icons.png) no-repeat;
  vertical-align: top;
}
.more-wrap .dynamic i {
  width: 28px;
  background-position: -465px -84px;
}
.more-wrap .more i {
  width: 20px;
  background-position: -473px -213px;
}
.pic-list__title .tab-title {
  display: inline-block;
  float: none;
  vertical-align: top;
}
.pic-list__title .tab-title a {
  margin-left: 24px;
}
.main-link {
  position: absolute;
  left: 274px;
  top: 18px;
  height: 26px;
  line-height: 26px;
  color: #6d757a;
}
.main-link:hover {
  color: #00a1d6;
}
.main-link i {
  display: inline-block;
  width: 22px;
  height: 26px;
  background: url(../../assets/image/page_icons.png) no-repeat -665px -1107px;
  vertical-align: top;
}
.pic-list .tab-cont__item {
  display: none;
}
.pic-list .tab-cont__cur {
  display: block;
}
.main-side__title {
  height: 64px;
}
.main-side__title .rank-t {
  float: left;
  padding-top: 22px;
  padding-right: 6px;
  font-size: 18px;
}
.main-side__cont {
  position: relative;
  overflow: hidden;
}
.main-side__cont .tab-cont {
  overflow: hidden;
  width: 200%;
  /*margin-left: -100%;*/
}
.main-side__cont .tab-cont__item {
  float: left;
}
.main-side__cont .slider-ov {
  overflow: hidden;
  width: 260px;
  border-radius: 4px;
}
.main-side__cont .slider {
  position: relative;
  width: 100%;
  height: 248px;
}
.main-side__cont .slider-img,
.main-side__cont .slider-img a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.main-side__cont .slider-img img {
  width: 100%;
  height: 100%;
}
.main-side__cont .slider-title {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 100%;
  height: 26px;
  line-height: 26px;
  background-color: rgba(0, 0, 0, .6);
}
.main-side__cont .slider-title p {
  color: #fff;
  padding-left: 10px;
}
.main-side__cont .slider-btn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 24px;
  background-color: rgba(0, 0, 0, .8);
  font-size: 0;
  text-align: center;
}
.main-side__cont .slider-btn span {
  display: inline-block;
  width: 10px;
  height: 6px;
  margin: 9px 2px 0;
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.main-side__cont .slider-btn span.cur {
  width: 30px;
  background-color: #f25d8e;
}
.main-side__cont .slider-user {
  margin: 10px -12px 0 0;
}
#promote {
  margin-top: 0;
}
#promote .promote-link {
  display: inline-block;
  margin: 18px 0 0 18px;
  line-height: 46px;
  color: #6d757a;
  vertical-align: top;
}
#promote .promote-link:hover {
  color: #00a1d6;
}
#promote .icon-promote {
  background-position: -141px -62px;
}
#promote .img-info {
  padding-top: 8px;
}
#promote .img-info a {
  line-height: 20px;
}
.promote-side__title {
  padding: 0 12px;
  margin: 20px 0 10px;
  height: 34px;
  border-radius: 4px;
  text-align: center;
  color: #6d757a;
  background-color: #e5e9ef;
}
.promote-side__title a {
  display: inline-block;
  line-height: 34px;
  color: #6d757a;
}
.promote-side__title a:hover {
  color: #00a1d6;
}
.promote-side__title span {
  display: inline-block;
  margin: 0 12px;
}
.promote-side__img img {
  width: 260px;
  height: 150px;
  border-radius: 4px;
}
/* live */
#live .icon-live {
  background-position: -141px -641px;
}
#live .live-online {
  display: inline-block;
  margin: 18px 0 0 18px;
  line-height: 46px;
  color: #6d757a;
  vertical-align: top;
}
#live .live-online em {
  color: #00a1d6;
}
#live .category {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 4px 0 0;
}
#live .pic-list__wrapper .item:hover .category {
  display: none;
}
#live .headImg {
  position: absolute;
  left: 24px;
  top: 26px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
#live .pic-list__wrapper .icon-live {
  position: absolute;
  right: 24px;
  top: 40px;
  width: 32px;
  height: 20px;
  padding-left: 16px;
  line-height: 20px;
  border-radius: 20px;
  color: #fff;
  background-color: #00a1d6;
}
#live .pic-list__wrapper .icon-live:before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
}
#live .pic-list__wrapper .headImg,
#live .pic-list__wrapper .icon-live {
  display: none;
}
#live .pic-list__wrapper .item:hover .headImg,
#live .pic-list__wrapper .item:hover .icon-live {
  display: block;
}
#live .pic-list__wrapper .img-link .mask {
  background-color: rgba(0, 0, 0, .5);
}
#live .live-rank {
  float: left;
  padding-top: 24px;
}
#live .live-focus {
  position: relative;
  width: 260px;
  height: 300px;
  background-color: #fff;
}
#live .live-focus span {
  display: block;
  width: 54px;
  line-height: 18px;
  padding-left: 24px;
  margin: 43px auto 0;
  background: url(../../assets/image/state_icon.png) no-repeat -152px -599px;
}
#live .slider-user a {
  position: relative;
  float: left;
  overflow: hidden;
  margin-right: 12px;
  width: 56px;
  height: 56px;
  border-radius: 4px;
}
#live .slider-user img {
  width: 100%;
}
#live .slider-user p {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 18px;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, .6);
}
#live .slider-user a:hover p {
  height: 100%;
  line-height: 22px;
  padding: 8px 5px;
  word-break: break-all;
  box-sizing: border-box;
}
/* animation */
#animation .icon-animation {
  background-position: -141px -896px;
}
/* 番剧 && 国创 */
#bangumi .icon-bangumi {
  background-position: -141px -128px;
}
.weekCont .week-tab {
  margin-left: 22px;
  border-bottom: 1px solid #e5e9ef;
}
.weekCont .week-tab a {
  width: 48px;
  height: 35px;
  font-size: 18px;
  margin: 0 10px 0 0;
  text-align: center;
}
.weekCont .week-tab a:last-child {
  margin: 0;
}
.weekCont .week-tab a.cur {}
.week-schedule {
  position: relative;
  float: right;
  width: 94px;
  height: 34px;
  padding-left: 10px;
  line-height: 34px;
  margin-top: 18px;
  border: 1px solid #f25d8e;
  border-radius: 4px;
  font-size: 14px;
  color: #f25d8e;
}
.week-schedule:hover {
  color: #fff;
  background-color: #f25d8e;
}
.week-schedule i {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 6px;
  height: 12px;
  background: url(../../assets/image/page_icons.png) no-repeat -478px -281px;
}
.week-schedule:hover i {
  background-position: -541px -218px;
}
.weekCont-list {
  padding-top: 18px;
}
.weekCont-list li {
  float: left;
  width: 33.33%;
  height: 72px;
  padding-bottom: 36px;
}
.weekCont-list .pic {
  float: left;
  width: 72px;
  height: 72px;
}
.weekCont-list .pic img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.weekCont-list .info {
  position: relative;
  float: left;
  width: 120px;
  height: 72px;
  margin-left: 12px;
}
.weekCont-list .info a {}
.weekCont-list .info p {
  position: absolute;
  bottom: 0;
  color: #aaa;
}
.weekCont-list .info span {
  display: inline-block;
  max-width: 80px;
  min-width: 28px;
  line-height: 18px;
  padding: 0 4px;
  margin-left: 5px;
  text-align: center;
  color: #fff;
  background-color: #ff8eb3;
  border-radius: 9px;
}
.weekCont .main-rank {
  float: none;
}
.weekCont .main-rank span {
  color: #aaa;
  padding-left: 10px;
}
#bangumi_dynamic .pic-list__title h2 {
  font-size: 18px;
}
.bangumi-pic {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.bangumi-pic .info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 28px;
  padding-top: 20px;
  background: -webkit-linear-gradient(transparent,rgba(0,0,0,0.5));
}
.bangumi-pic .info p {
  padding: 5px 10px 0;
  line-height: 20px;
  color: #fff;
}
#china .icon-china {
  background: url(../../assets/image/china_title_icon.png) no-repeat 0 14px;
}
#china_dynamic h2 {
  font-size: 18px;
}
.china_side img {
  border-radius: 4px;
}
/* 余下的icon */
#music .icon-music {
  background-position: -140px -252px;
}
#dance .icon-dance {
  background-position: -141px -447px;
}
#game .icon-game {
  background-position: -141px -189px;
}
#technology .icon-technology {
  background-position: -141px -511px;
}
#life .icon-life {
  background-position: -137px -956px;
}
#guichu .icon-guichu {
  background-position: -141px -318px;
}
#fasion .icon-fasion {
  background-position: -141px -704px;
}
#gg .icon-gg {
  background-position: -140px -1214px;
}
#yule .icon-yule {
  background-position: -141px -1018px;
}
#movie .icon-movie {
  background-position: -141px -382px;
}
#tv .icon-tv {
  background-position: -141px -832px;
}
.side-select {
  position: relative;
  float: right;
  width: 55px;
  margin-top: 18px;
  border: solid 1px #ccd0d7;
  border-radius: 4px;
}
.side-select:hover {
  border: solid 1px #ccd0d7;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  box-shadow: rgba(0,0,0,0.16) 0 2px 4px;
}
.side-select span,
.side-select i {
  display: inline-block;
  line-height: 22px;
}
.side-select span {
  padding-left: 7px;
}
.side-select i {
  width: 12px;
  height: 6px;
  background: url(../../assets/image/page_icons.png) -475px -157px no-repeat;
}
.main-rank {
  float: left;
  width: 260px;
  padding-bottom: 15px;
}
.main-rank .item {
  height: 18px;
  margin-bottom: 20px;
}
.main-rank .item:last-child {
  margin: 0;
}
.main-rank .item a {
  overflow: hidden;
  height: 18px;
  line-height: 18px;
}
.main-rank .item i {
  float: left;
  width: 18px;
  height: 18px;
  line-height: 18px;
  margin-right: 7px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
  background-color: #b8c0cc;
}
.main-rank .item i.n1,
.main-rank .item i.n2,
.main-rank .item i.n3 {
  background-color: #f25d8e;
}
.main-rank .item-one {
  height: 50px;
}
.main-rank .item-one a {
  height: 100%;
}
.main-rank .item-one img {
  float: left;
  width: 80px;
  height: 50px;
  margin-right: 5px;
  border-radius: 4px;
}
.main-rank .item-one div {
  float: right;
  width: 150px;
}
.main-rank .item-one .title {
  height: 36px;
  line-height: 18px;
  word-wrap: break-word;
  word-break: break-all;
}
.main-rank .item-one .mark {
  color: #99a2aa;
}
/* more */
.main-side__cont .more {
  position: relative;
  width: 100%;
  height: 24px;
  line-height: 24px;
  background-color: #e5e9ef;
  border-radius: 4px;
  text-align: center;
  color: #333;
}
.main-side__cont .more:hover {
  background-color: #ccd0d7;
}
.main-side__cont .more i {
  position: absolute;
  width: 20px;
  height: 22px;
  background: url(../../assets/image/page_icons.png) no-repeat -473px -211px;
}

</style>